﻿<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>目录</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="<%=basePath%>plug_in/images/icon/top.ico" type="image/x-icon"/>
    <base href="<%=basePath%>">
    <script src="<%=basePath%>/plug_in/js/jquery-1.11.1.min.js"></script>
    <!-- 引入layui -->
    <link rel="stylesheet" type="text/css" href="<%=basePath%>plug_in/layui254/css/layui.css">
    <script type="text/javascript" src="<%=basePath%>plug_in/layui254/layui.js"></script>

</head>


<body style="padding-left: 20px;padding-top: 20px;">


<!-- 功能区域 -->
<blockquote class="layui-elem-quote news_search">
    <form class="layui-form">
        <div class="layui-form-item" style="display:inline-block">
            <div class="layui-inline">
                <label class="layui-form-label">表名:</label>
                <div class="layui-input-inline">
                    <input type="text" id="tableName" class="layui-input" placeholder="" style="width: 180px;"/>
                </div>
            </div>
        </div>

        &nbsp;&nbsp;&nbsp;&nbsp;
        <%--<a class="layui-btn layui-btn-danger" onclick="dels()" style="margin-left:10px">批量删除</a>--%>
        <a class="layui-btn" onclick="reloadTable()" style="margin-left:10px">重置</a>
        <a class="layui-btn layui-btn-normal" onclick="searchs()" style="margin-left:10px">查询</a>
    </form>
</blockquote>


<!-- 表格开始 -->
<form class="layui-form">
    <table class="layui-table" id="layuiTable" lay-filter="tableFilter"></table>
</form>


<div>
    <!-- 工具栏 toobar  可以放到 任意位置-->
    <script type="text/html" id="toolbar">
        <a class="layui-btn" lay-event="detail" style="line-height: 25px;height: 25px;">查看</a>
        <!--<a class="layui-btn" lay-event="update"  style="line-height: 25px;height: 25px;" >修改</a>-->
        <%--<a class="layui-btn layui-btn-danger" lay-event="del" style="line-height: 25px;height: 25px;">删除</a>--%>
    </script>
</div>

</body>

<script>

    function searchs() {//查询
        var tableName = $("#tableName").val();

        layui.table.reload('layuiTable', {
            where: {
                tableName: tableName
            }
        });
    }

    function reloadTable() {//刷新表格
        $("#tableName").val('');
        layui.table.reload('layuiTable', {where: {tableName: null}});
        location.reload();
    }



    function addOrUpdate(layEvent, tableName){
        layer.open({
            type:2,
            area: ['800', '500'],
            skin: 'layui-layer-lan',
            title: '日志详情' ,
            shade: [0.5, '#393D49'],
            btn: ['确定', '关闭'],
            maxmin: true, //开启最大化最小化按钮
            content:"<%=basePath%>/api/moni/detail?tableName="+tableName,
            yes: function(index, layero){
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
        });

    }


    var layer;
    layui.use(['laypage', 'layer', 'table', 'form', 'laydate'], function () {
        var laypage = layui.laypage
            , thisLayer = layui.layer
            , form = layui.form, laydate = layui.laydate
            , table = layui.table;
        layer = thisLayer;

        //日期范围
        laydate.render({
            elem: '#serchDate'
            , range: true
        });

        table.render({
            url: "<%=basePath%>api/moni/grid",
            method: 'POST', //方式
            elem: '#layuiTable', //数据表格渲染到什么位置
            id: 'layuiTable', //生成 Layui table 的标识 id 用于操作数据用
            where: {}, //默认 参数 type: "all"
            height: 600,  //容器高度
            //width:1000,
            cols: [[
                {checkbox: true, align: 'center'},
                {field: "tableName", title: '表名字', minWidth: 120},
                {field: "tableRows", title: '数据量(带缓存)', minWidth: 100,sort: true},
                {field: "autoIncrement", title: '主键ID最大值', minWidth: 60,sort: true},
                {field: "createTime", title: '创建时间', minWidth: 120},
                {field: "updateTime", title: '修改时间', minWidth: 120},
                {field: "opt", title: '操作', toolbar: '#toolbar', minWidth: 180}
            ]],
            page: true, //是否显示分页栏
            limit: 10

        });
        //监听工具条
        table.on('tool(tableFilter)', function (obj) { //注：tool是工具条事件名，tableFilter是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            var tableName = data.tableName;
            if (layEvent === 'detail') { //查看
                addOrUpdate(layEvent, tableName)
            } else if (layEvent === 'del') { //删除
                dels(id);
            }
        });
    });


</script>
</html>